<template>
  <div>
    <el-form :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm">
      <el-form-item label="活动名称"
        prop="name">
        <el-input v-model="name"></el-input>
      </el-form-item>
    </el-form>
    <el-select v-model="value9"
      multiple
      filterable
      remote
      reserve-keyword
      placeholder="请输入关键词"
      :remote-method="remoteMethod"
      :loading="loading">
      <el-option v-for="item in options4"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-button type="primary"
      @click="next">下一步</el-button>
  </div>
</template>
<script>
import { getAgreementUnitList } from "@/service/home.js";
export default {
  data() {
    return {
      options4: [],
      value9: [],
      list: [],
      loading: false,
      name: "",
      states: [
        "啊地方撒地方",
        "Alaska",
        "Arizona",
        "Arkansas",
        "California",
        "Colorado",
        "Connecticut",
        "Delaware",
        "Florida",
        "Georgia",
        "Hawaii",
        "Idaho",
        "Illinois",
        "Indiana",
        "Iowa",
        "Kansas",
        "Kentucky",
        "Louisiana",
        "Maine",
        "Maryland",
        "Massachusetts",
        "Michigan",
        "Minnesota",
        "Mississippi",
        "Missouri",
        "Montana",
        "Nebraska",
        "Nevada",
        "New Hampshire",
        "New Jersey",
        "New Mexico",
        "New York",
        "North Carolina",
        "North Dakota",
        "Ohio",
        "Oklahoma",
        "Oregon",
        "Pennsylvania",
        "Rhode Island",
        "South Carolina",
        "South Dakota",
        "Tennessee",
        "Texas",
        "Utah",
        "Vermont",
        "Virginia",
        "Washington",
        "West Virginia",
        "Wisconsin",
        "Wyoming"
      ],
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    this.list = this.states.map(item => {
      return { value: item, label: item };
    });
    this._getAgreementUnitList();
    eventBus.$on("activeName", function(val) {
      console.log("这个是用transimissiontwo的val值为：" + val);
    });
  },
  methods: {
    _getAgreementUnitList() {
      var data = {
        companyId: parseInt(sessionStorage.getItem("companyId")),
        state: 1,
        userId: parseInt(sessionStorage.getItem("userId"))
      };
      console.log(data);
      getAgreementUnitList(data).then(res => {
        console.log(res);
      });
    },
    next() {
      console.log("1111");

      eventBus.$emit("activeName", "second");
    },
    remoteMethod(query) {
      console.log(query);
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options4 = this.list.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options4 = [];
      }
    }
  }
};
</script>
<style lang="scss" scoped>
</style>

